<template>
    <div class="container">
        <h3>发表评论</h3>
        <hr>
        <textarea name="" id="" cols="30" rows="10" v-model="commentCon" placeholder="请输入要评论的内容"></textarea>
        <mt-button type="primary" size="large" class="comment-commit" @click="commitCom">发表评论</mt-button>
        
        <div class="comment-list">
            <div class="comment-item" v-for="(items,i) in commentlist" :key="items.id">
                <div class="comment-head">
                    <span>第{{i+1}}楼&nbsp;&nbsp;用户：{{ items.user }}</span>&nbsp;&nbsp;
                    <span>发表时间：{{ items.Ctime }}</span>
                </div>
                <div class="comment-body">
                    {{  items.content }}
                </div>
            </div>
        
            <hr>
        

        </div>
        <mt-button type="danger" size="large" plain class="load-more">加载更多</mt-button>
    </div>
</template>
<script>
import { Toast } from 'mint-ui'
export default {
    data:function (){
        return {
            commentCon:'',
            commentlist:[
                {id:1,user:'匿名用户',Ctime:'2018-10-5 12:30',content:'朝辞白帝彩云间'},
                {id:2,user:'匿名用户',Ctime:'2018-10-5 12:30',content:'朝辞白帝彩云间'},
                {id:3,user:'匿名用户',Ctime:'2018-10-5 12:30',content:'朝辞白帝彩云间'},
                {id:4,user:'匿名用户',Ctime:'2018-10-5 12:30',content:'朝辞白帝彩云间'},
                {id:5,user:'匿名用户',Ctime:'2018-10-5 12:30',content:'朝辞白帝彩云间'},
                {id:6,user:'匿名用户',Ctime:'2018-10-5 12:30',content:'朝辞白帝彩云间'},
                {id:7,user:'匿名用户',Ctime:'2018-10-5 12:30',content:'朝辞白帝彩云间'},
                {id:8,user:'匿名用户',Ctime:'2018-10-5 12:30',content:'朝辞白帝彩云间'},
                {id:9,user:'匿名用户',Ctime:'2018-10-5 12:30',content:'朝辞白帝彩云间'},
                {id:10,user:'匿名用户',Ctime:'2018-10-5 12:30',content:'朝辞白帝彩云间'},
                {id:11,user:'匿名用户',Ctime:'2018-10-5 12:30',content:'朝辞白帝彩云间'},
                {id:12,user:'匿名用户',Ctime:'2018-10-5 12:30',content:'朝辞白帝彩云间'},
            ]
        }
    },
    methods:{
        commitCom(){
            if(this.commentCon.length == 0){
                Toast('请输入评论内容')
            }else{
                var first = {id:Date.now(),user:'匿名用户',Ctime:'2018-10-5 12:30',content:this.commentCon}
                
                this.commentlist.unshift(first)
                this.commentCon = ''
                
            }
        }
    }
}

    
</script>
<style lang="scss" scoped>
    .container {
        margin-top: 15px;
        h3 {
            font-size: 20px;
            font-weight: 500;
            margin: 20px 0;
        }
        hr {
        border-top: 0.5px solid #eee;
        }
        textarea {
            height: 140px;
            color: #999;
            font-size: 12px;
            margin: 0;
            margin: 10px 0 20px 0;
        }
        .comment-commit {
            margin-bottom: 20px;
        }
    }
    .comment-list {
        .comment-head {
            font-size: 12px;
            color: #999;
            line-height: 30px;
            background-color: rgb(248, 248, 248);
            padding-left: 15px;
        }
        .comment-body {
            font-size: 14px;
            color: #333;
            line-height: 40px;
            text-indent: 15px;
        }
        
    }
    .load-more {
          margin-top: 30px;  
        }
</style>